<template>
  <div :ref="'container'" class="mood" tabindex="0"
    :style="{ height: props.params.eGridCell.offsetHeight + 'px', width: props.params.eGridCell.offsetWidth + 'px', display: 'flex', gap: '8px', 'alignItems': 'center' }">

    <el-tooltip :visible="true" placement="top">
      <template #content>
        <span>请使用','进行分割</span>
      </template>
      <ElInput ref="inputRef" v-model="textVal" style="width: 100%; height: 100%;" @blur="onBlur">
      </ElInput>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ElInput } from 'element-plus';
import { nextTick, onMounted, ref } from 'vue';

interface MoodEditorParams {
  value: string;
  values: Array<{ label: string; value: string }>;
  stopEditing: () => void;
  eGridCell: HTMLDivElement
}

// table 传递进来的值
const props = defineProps<{
  params: MoodEditorParams;
}>();

// 本地的值, 只在本地进行操作, 通过 getValue 将本地值进行返回
const textVal = ref(props.params.value);

// watchEffect(() => {
//   // 获取params中的数据
//   console.log(props.params);
//   console.log(props.params.eGridCell.offsetWidth)
//   console.log(props.params.eGridCell.offsetHeight)
// });

const setValue = (value: string) => {
  textVal.value = value;
};

const onBlur = () => {
  // props.params.stopEditing();
}

const inputRef = ref<InstanceType<typeof ElInput> | null>();
const setInitialValue = () => {
  setValue(props.params.value);
};

// 设置默认值
onMounted(() => {
  setInitialValue();
  nextTick(() => {
    inputRef.value?.focus();
  });
});

// 返回 value 的值
const getValue = () => {
  return textVal.value;
};

//
const isPopup = () => {
  return true;
};

// 导出 value
defineExpose({
  getValue,
  isPopup
})
</script>

<style scoped>
/* 在 table cellEditor 组件中 scoped 无效 */
</style>
